<template>
  <ul class="topNav">
    <li>
      <router-link to="/recommend">推荐</router-link>
    </li>
    <li>
      <router-link to="/top">热歌榜</router-link>
    </li>
  </ul>
</template>
<style lang="less" scoped>
.topNav {
  display: flex;
  position: fixed;
  top: 60px;
  width: 100%;
  border-bottom: 1px solid #ccc;
  background-color: #fff;
  // background-color: rgb(128,95,119);
  z-index: 5;
  li {
    flex: 1;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    // background-image: url("../assets/img/recommend1.png");
    // background-repeat: no-repeat;
    // background-size: 20px;
    // background-position: 55px 9px;
    img {
      width: 20px;
      height: 20px;
      margin-top: -2px;
    }
    a {
      display: inline-block;
      line-height: 40px;
      margin: 0 20px;
      font-size: 15px;
      color: #333;
      &.router-link-exact-active {
        color: #22d59c;
        position: relative;
        &::after {
          content: "";
          width: 100%;
          height: 3px;
          background-color: #22d59c;
          position: absolute;
          left: 0;
          bottom: -2px;
        }
      }
    }
  }
}
</style>